<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="password-box">
		<text class="title">重置密码</text>
		<!-- 登录表单 -->
		<view class="password-from">
			<!-- 表单 -->
			<view class="from-int">
				<up-input maxlength="11" type="number" color="#D3D5D5" v-model="loginFrom.phone" placeholder="请输入手机号码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">+86</text>
							<up-icon name="arrow-down-fill" color="#949699" size="18rpx"></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<view class="from-int">
				<up-input color="#D3D5D5" v-model="loginFrom.code" type="number" placeholder="请输入验证码" border="none"
					:customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">验证码</text>
						</view>
					</template>
					<template #suffix>
						<view class="suffix-box flex-center">
							<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
							<view class="getCode-btn flex-center" @click="getCode">
								<text class="text">{{codeTips}}</text>
							</view>
						</view>
					</template>
				</up-input>
			</view>
			<view class="from-int">
				<up-input :password="isPassword" color="#D3D5D5" v-model="loginFrom.newPassWord" placeholder="请输入新密码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">新密码</text>
						</view>
					</template>
					<template #suffix>
						<view class="suffix-box flex-center" @click="changeisPassword">
							<up-icon name="eye-off" color="#979797" size="32rpx" v-if="isPassword"></up-icon>
							<up-icon name="eye" color="#979797" size="32rpx" v-else></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<view class="from-int">
				<up-input :password="isPasswordTwo" color="#D3D5D5" v-model="loginFrom.password" placeholder="请输入确认密码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">确认密码</text>
						</view>
					</template>
					<template #suffix>
						<view class="suffix-box flex-center" @click="()=>isPasswordTwo=!isPasswordTwo">
							<up-icon name="eye-off" color="#979797" size="32rpx" v-if="isPasswordTwo"></up-icon>
							<up-icon name="eye" color="#979797" size="32rpx" v-else></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<!-- 登录按钮 -->
			<view class="from-btn">
				<up-button text="确定" shape="circle" :loading="loginFrom.loadingStatus" @click="submitPassword"
					loadingText="提交中" :customStyle="{
					height:'88rpx',
					fontWeight: 'bold',
					fontSize: '34rpx',
					color: '#0A534F',
				}" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
			<!-- 操作按钮 -->
			<view class="option-box flex-row-center" v-if="props.pageType!=1">
				<text class="option-text" @click="toLogin">已有帐号，去登陆></text>
			</view>
		</view>
		<!-- 协议 -->
		<view class="agreement-box flex-center">
			<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
				@change="changeChecked" name="agree" :checked="loginFrom.checked">
			</up-checkbox>
			<view class="content flex-row-center">
				<text class="agreement-name" @click="toProtocol(1)">《平台协议》</text>
				<text class="text">与</text>
				<text class="agreement-name" @click="toProtocol(2)">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		pageType: {
			default: ''
		}
	})
	const customStyle = {
		backgroundColor: "#303335",
		height: '88rpx',
		boxSizing: 'border-box',
		padding: '0 26rpx',
	}
	const rules = {
		phone: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		code: {
			required: true,
			len: 4,
			msg: '请输入四位的验证码'
		},
		password: {
			required: true,
			msg: '请输入确认密码'
		},
		newPassWord: {
			required: true,
			msg: '请输入新密码'
		}
	};

	const loginFrom = reactive({
		phone: '',
		code: '',
		checked: false,
		loadingStatus: false,
		password: '', //确认密码
		newPassWord: '' //新密码
	});
	const isPasswordTwo = ref(true);
	const isPassword = ref(true);
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);

	const codeChange = (text) => {
		codeTips.value = text;
	};
	const changeChecked = (e) => {
		loginFrom.checked = e;
	}
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(loginFrom.phone)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: loginFrom.phone,
				event: 'resetpwd'
			});
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading();
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const submitPassword = async () => { //验证验证码
		if (loginFrom.loadingStatus) return;
		const validate = validateForm(loginFrom, rules); //验证
		if (!validate.status) return

		if (loginFrom.password !== loginFrom.newPassWord) {
			uni.$u.toast('两次密码不一致');
			return
		}

		if (!loginFrom.checked) {
			uni.$u.toast('请先勾选协议');
			return
		}
		loginFrom.loadingStatus = true;
		const res = await $Api.login.restPassword({
			mobile: loginFrom.phone,
			newpassword: loginFrom.password,
			captcha: loginFrom.code
		})
		if (res.code == '1') {
			uni.showToast({
				title: '重置成功！'
			})
			setTimeout(() => {
				loginFrom.loadingStatus = false;
				uni.navigateBack()
			}, 800)
		} else {
			loginFrom.loadingStatus = false;
			uni.$u.toast(res.msg);
		}
	}
	const changeisPassword = () => { //切换密码框属性
		isPassword.value = !isPassword.value
	}
	const toLogin = () => { //去登录
		uni.reLaunch({
			url: '/pages/login/login'
		});
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style>
	.placeholderClass {
		font-weight: 500;
		font-size: 30rpx;
		color: #F8F8F8;

	}
</style>
<style lang="scss" scoped>
	.password-box {
		width: 100%;
		box-sizing: border-box;
		padding: 54rpx;
		margin-top: 128rpx;

		.title {
			font-weight: bold;
			font-size: 50rpx;
			color: rgba(255, 255, 255, 0.87);
		}

	}

	.password-from {
		margin-top: 64rpx;

		.from-head {
			justify-content: space-between;

			.text-lin {
				font-weight: 500;
				font-size: 28rpx;
				color: #D3D5D5;
			}

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}

		.from-int {
			margin-top: 40rpx;

			.prefix-box {
				width: 128rpx;
				height: 100%;

				.prefix-text {
					font-weight: 500;
					font-size: 30rpx;
					color: #DEDEDE;
					margin-right: 4rpx;
				}
			}

			.suffix-box {}

			.getCode-btn {
				padding-left: 18rpx;
				border-left: 2rpx solid #4D4D4D;
				font-weight: 500;
				font-size: 24rpx;
				color: #66B7AF;

			}
		}

		.from-btn {
			margin-top: 154rpx;
			width: 100%;
		}

		.option-box {
			width: 100%;
			justify-content: flex-end;
			margin-top: 48rpx;

			.option-text {
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}

	.agreement-box {
		width: 100%;
		position: absolute;
		bottom: 112rpx;
		left: 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>